<template>
  <el-container v-loading="!booksAvailable" element-loading-text="拼命加载中">
    <el-main>
      <el-collapse v-model="activeName">
        <el-collapse-item title="我上传的" name="1">
          <h1 v-if="books.upload.length===0">当前您没有上传文献</h1>
          <el-row>
            <el-col :span="4" v-for="(item, index) in books.upload" :key="index">
              <el-card @click.native="goToForum(index, 'u')" :body-style="{ padding: '0px' }"
                       style="margin-right: 20px; margin-bottom: 20px; cursor:pointer;">
                <img :src="item.coverUrl" class="image">
                <div style="padding: 14px;">
                  <div class="bottom clearfix">
                    <el-row :gutter="20">
                      <el-col :span="24"><span style="font-size: 12px;">{{ item.name }}</span></el-col>
                      <!--                      <el-col :span="6">-->
                      <!--                        <el-button type="primary" icon="el-icon-setting" class="button"></el-button>-->
                      <!--                      </el-col>-->
                    </el-row>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-collapse-item>
        <el-collapse-item title="我阅读的" name="2">
          <h1 v-if="books.reading.length===0">当前您没有阅读文献</h1>
          <el-row v-if="books.reading.length!==0">
            <el-col :span="4" v-for="(item, index) in books.reading" :key="index">
              <el-card @click.native="goToForum(index, 'r')" :body-style="{ padding: '0px' }"
                       style="margin-right: 20px; margin-bottom: 20px;">
                <img :src="item.coverUrl" class="image">
                <div style="padding: 14px;">
                  <div class="bottom clearfix">
                    <el-row :gutter="20">
                      <el-col :span="18"><span style="font-size: 12px;text-align: justify">{{ item.name }}</span>
                      </el-col>
                      <el-col :span="6">
                        <el-button type="primary" icon="el-icon-setting" class="button"></el-button>
                      </el-col>
                    </el-row>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
    </el-main>
  </el-container>
</template>

<script>
import {getRequest} from '../../tools/api'
import Epub from 'epubjs'

export default {
  name: 'Learned',
  data () {
    return {
      booksAvailable: false,
      books: {
        upload: [],
        reading: []
      },
      uploadForm: {
        file: '',
        category: ''
      },
      category: '',
      fileList: [],
      uploadFormRules: {
        file: [{required: true, message: '请上传文件', trigger: 'blur'}],
        category: [{required: true, message: '请选择文献类别', trigger: 'blur'}]
      },
      activeName: '1'
    }
  },
  created () {
    this.initBookShelf()
  },
  methods: {
    goToForum (index, type) {
      // query是使用path来跳转的,params根据name来跳转的
      const URL = type === 'r' ? this.books.reading[index].url : this.books.upload[index].url
      this.$router.push({
        path: '/LearnedForum',
        query: {bookUrl: URL}
      })
    },
    initBookShelf () {
      this.initBookShelfUpload()
      this.initBookShelfRead()
      this.booksAvailable = true
      // console.log('books', this.books)
    },
    initBookShelfUpload () {
      getRequest('/literaturedetail/queryLiteratureGrade/' + this.$store.getters.userInfo.id).then((res) => {
        // console.log('res:', res)
        if (res.code === 200) {
          this.books.upload = res.data
          // 请求文献封面
          for (let i = 0; i < this.books.upload.length; i++) {
            const book = new Epub(this.books.upload[i].url) // 生成Book对象
            book.loaded.cover.then(cover => {
              book.archive.createUrl(cover).then(url => {
                this.books.upload[i].coverUrl = url
                this.$forceUpdate()
              })
            })
            if (this.books.upload[i].name.length > 12) {
              this.books.upload[i].name = this.books.upload[i].name.slice(0, 12) + '...'
            }
          }
        }
      })
    },
    initBookShelfRead () {
      getRequest('/readingprogress/queryIsReading/' + this.$store.getters.userInfo.id).then((res) => {
        // console.log('res:', res)
        if (res.code === 200) {
          this.books.reading = res.data
          for (let i = 0; i < this.books.reading.length; i++) {
            const book = new Epub(this.books.reading[i].url) // 生成Book对象
            book.loaded.cover.then(cover => {
              book.archive.createUrl(cover).then(url => {
                this.books.reading[i].coverUrl = url
                this.$forceUpdate()
              })
            })
            if (this.books.reading[i].name.length > 12) {
              this.books.reading[i].name = this.books.reading[i].name.slice(0, 12) + '...'
            }
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  height: 200px;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>
